// import React from "react";
import { Link } from "react-router-dom";
import { useState, useEffect } from "react";
import { useLocation } from "react-router-dom";
// 引入样式
import '../assets/css/order.css'
export default function Order() {
    const { state } = useLocation()
    console.log(state);
    // 订单列表
    /* let [orderlist, setorderlist] = useState([
    ]); */
    //从本地获取到购物车传过来的数据
    let [orderList, setorderList] = useState(
        JSON.parse(sessionStorage.getItem('arr'))
    )
    // 总价是跟着变的
    let [allPrice, changePrice] = useState(0)
    useEffect(() => {
        /* let obj = JSON.parse(sessionStorage.getItem('arr'))
        console.log(obj); */
        console.log(orderList);
        function price() {
            let sum = 0;
            orderList.map((item) => {
                sum += item.price * (item.num || item.ishot || 1)
            })
            return sum.toFixed(2)
        }
        changePrice(price)
    }, [])
    function sure() {
        console.log(orderList);
    }
    return (
        <div id="order">
            <header>
                {/* 顶部信息 */}
                <div className="top_box">
                    {/*- 左箭头 */}
                    <a href="#">
                        <span className="iconfont icon-zuojiantou"></span>
                    </a>
                    <h2>确认订单</h2>
                    {/* 更多图标 */}
                    <div className="more">
                        {/*- ... */}
                        <a href="#">
                            <span className="iconfont icon-gengduo"></span>
                        </a>
                        {/*-- 竖线 */}
                        <div className="line"></div>
                        {/*-- 小圆 */}
                        <a href="#">
                            <span className="iconfont icon-xiaoyuandian"></span>
                        </a>
                    </div>
                </div>
                <div className="bot_box">
                    <div className="box">
                        <p>
                            代用名 188 **** 8888
                        </p>
                        <p>
                            北京 北京市 昌平区 朱辛庄中公教育实训基地IT教学楼 2号楼 2202室
                        </p>
                    </div>
                </div>
            </header>
            <div className="pinpai">
                <div className="pinpai_top">
                    <div className="left">
                        <img src={require('../assets/images/小u自营.png')} alt="" />
                        <p>品牌精选</p>
                    </div>
                    <div className="right">
                        <p>
                            <span>已免运费</span>
                            <span>
                                <a href="#">领券</a>
                            </span>
                        </p>
                    </div>
                </div>
                <div className="pinpai_bot">
                    <ul>
                        {orderList.map((item, i) => {
                            return (
                                <li key={item.id}>
                                    <div className="left">
                                        <img src={item.img} />
                                    </div>
                                    <div className="right">
                                        <p>{item.goodsname}</p>
                                        <div className="box">
                                            <div className="left">
                                                <span>￥</span>
                                                <span>{item.price}</span>
                                            </div>
                                            <div className="right">
                                                <span>×</span>
                                                <span>{item.num || item.ishot}</span>
                                            </div>
                                        </div>
                                        <p>
                                            <span>7天无理由退货</span>
                                            <span>特价</span>
                                        </p>

                                    </div>
                                </li>
                            )
                        })}
                    </ul>
                </div>
                <div className="serve">
                    <div className="leixing">
                        <p>发票类型</p>
                        <a href="#">
                            不开发票
                            <span className="iconfont icon-arrow-right "></span>
                        </a>
                    </div>
                    <div className="shouhou">
                        <p>售后免邮</p>
                        <p>部分商家赠送</p>
                    </div>
                    <div className="liuyan">
                        <p>买家留言</p>
                        <p>填写内容需要与商家协商并确认，45字以内</p>
                    </div>
                </div>
            </div>
            <div className="price">
                <div className="jine">
                    <p>商品金额</p>
                    <p>￥{
                            state ?
                                <span>{Number(allPrice)+(Number(state.money)) }</span> :
                                <span>{allPrice}</span>
                        }</p>
                </div>
                <div className="huodong">
                    <p>优惠活动</p>
                    <p>
                        {
                            state ?
                                <span>以优惠{state.money}</span> :
                                <span>无优惠</span>
                        }
                    </p>
                </div>
                <div className="youhui">
                    {/* <p>优惠券</p> */}
                    <Link to="/cou" className="right">
                        优惠券
                    </Link>
                    {state ? (<p>{state.title}</p>) : (<p>暂无可以用</p>)}
                </div>
            </div>
            <footer>
                <div className="foot_box">
                    <div className="left">
                        <p>
                            <span>合计</span>
                            <span>已免运费</span>
                        </p>
                        <p>
                            {/* 合计金额得封装 */}
                            <span>￥{allPrice}</span>
                        </p>
                    </div>
                    {/* 点击确认订单跳转 */}
                    <div className="right">
                        <p onClick={() => sure()}>确认订单</p>
                    </div>
                </div>
            </footer>
        </div>)
}